<template name='toastBox'>
  <view :class="['loading_box',{'shadow':toastConfig.type == 'update' || toastConfig.type == 'modal'}]"
        v-if="toastConfig.show">
    <view class="default"
          v-if="toastConfig.type == 'default'">
      {{toastConfig.text}}
    </view>
    <view class="loading"
          v-if="toastConfig.type == 'loading'">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <view class="loadingText">{{toastConfig.loadingText}}</view>
    </view>
    <view class="update"
          v-if="toastConfig.type == 'update'">
      <view class="updateBox">
        <view class="update_header">
          <view class="update_titleBox">
            <view class="update_title">发现新版本</view>
            <view class="update_title2">最新版本：v{{toastConfig.versions || '1.0.0'}}</view>
          </view>
        </view>
        <view class="update_content"
              v-html="toastConfig.text">
        </view>
        <view class="update_foot">
          <view @click="toastConfig.success"
                v-if="!toastConfig.doDownLoad"
                class="text">立即更新{{toastConfig.progress}}{{toastConfig.doDownLoad}}</view>
          <view v-else
                class="downLoad">
           
            <view class="bfb">{{toastConfig.progress}}%</view>
          </view>
        </view>
      </view>
    </view>
    <view class="modal"
          v-if="toastConfig.type == 'modal'">
      <view class="content">
        <image class="icon"
               :src="baseImgUrl+'/components/icon_component_toast.png'"></image>
        {{toastConfig.text}}
      </view>
      <view class="operation">
        <view class="cancel"
              @click="toastConfig.error">{{toastConfig.cancelText || '取消'}}</view>
        <view class="confirm"
              @click="toastConfig.success">{{toastConfig.confirmText || '确认'}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseImgUrl } from '@/config.js';
export default {
  name: 'toastBox',
  data () {
    return {
      baseImgUrl: baseImgUrl
    }
  },
  created () {
  },
  methods: {

  },
  // 实测直接在标签属性里写  $store.state.XX  拿不到数据  所以这里通过 计算属性去监听一下
  computed: {
    toastConfig () {
      return this.$store.state.common.toastConfig
    }
  }
}
</script>
<style lang="less" scoped>
.shadow {
  background: rgba(0, 0, 0, 30%);
}
.loading_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  .default {
    background: rgba(0, 0, 0, 30%);
    color: #fff;
    border-radius: 10rpx;
    padding: 20rpx 40rpx;
    max-width: 360rpx;
    text-align: center;
  }
  .loading {
    display: flex;
    flex-direction: column;

    align-items: center;
    .loadingText {
      text-align: center;
      color: #03a9f4;
    }
    ul,
    li {
      margin: 0;
      list-style-type: none;
      padding: 0;
    }
    ul {
      width: 120rpx;
      height: 120rpx;
      // background-color:#fff;
      border-radius: 50%;
      position: relative;
    }
    li {
      width: 16rpx;
      height: 26rpx;
      background: #03a9f4;
      position: absolute;
      border-radius: 50%;
      left: 50%;
      margin-left: -8px;
      margin-top: -13px;
      transform-origin: 4px 27px;
      animation: c1 1s infinite;
    }
    li:nth-of-type(2) {
      transform: rotate(45deg);
      background: #20b1f2;
      animation: c2 1s infinite;
    }
    li:nth-of-type(3) {
      transform: rotate(90deg);
      background: #47b9ed;
      animation: c3 1s infinite;
    }
    li:nth-of-type(4) {
      transform: rotate(135deg);
      background: #5fc0ec;
      animation: c4 1s infinite;
    }
    li:nth-of-type(5) {
      transform: rotate(180deg);
      background: #7acbef;
      animation: c5 1s infinite;
    }
    li:nth-of-type(6) {
      transform: rotate(225deg);
      background: #93d2ee;
      animation: c6 1s infinite;
    }
    li:nth-of-type(7) {
      transform: rotate(270deg);
      background: #b9dff0;
      animation: c7 1s infinite;
    }
    li:nth-of-type(8) {
      transform: rotate(315deg);
      background: #d7e8f0;
      animation: c8 1s infinite;
    }
    @keyframes c8 {
      0% {
        background: #03a9f4;
      }
      12.5% {
        background: #20b1f2;
      }
      25% {
        background: #47b9ed;
      }
      37.5% {
        background: #5fc0ec;
      }
      50% {
        background: #7acbef;
      }
      62.5% {
        background: #93d2ee;
      }
      75% {
        background: #b9dff0;
      }
      87.5% {
        background: #d7e8f0;
      }
      100% {
        background: #03a9f4;
      }
    }
    @keyframes c7 {
      0% {
        background: #20b1f2;
      }
      12.5% {
        background: #47b9ed;
      }
      25% {
        background: #5fc0ec;
      }
      37.5% {
        background: #7acbef;
      }
      50% {
        background: #93d2ee;
      }
      62.5% {
        background: #b9dff0;
      }
      75% {
        background: #d7e8f0;
      }
      87.5% {
        background: #03a9f4;
      }
      100% {
        background: #20b1f2;
      }
    }
    @keyframes c6 {
      0% {
        background: #47b9ed;
      }
      12.5% {
        background: #5fc0ec;
      }
      25% {
        background: #7acbef;
      }
      37.5% {
        background: #93d2ee;
      }
      50% {
        background: #b9dff0;
      }
      62.5% {
        background: #d7e8f0;
      }
      75% {
        background: #03a9f4;
      }
      87.5% {
        background: #20b1f2;
      }
      100% {
        background: #47b9ed;
      }
    }
    @keyframes c5 {
      0% {
        background: #5fc0ec;
      }
      12.5% {
        background: #7acbef;
      }
      25% {
        background: #93d2ee;
      }
      37.5% {
        background: #b9dff0;
      }
      50% {
        background: #d7e8f0;
      }
      62.5% {
        background: #03a9f4;
      }
      75% {
        background: #20b1f2;
      }
      87.5% {
        background: #47b9ed;
      }
      100% {
        background: #5fc0ec;
      }
    }
    @keyframes c4 {
      0% {
        background: #7acbef;
      }
      12.5% {
        background: #93d2ee;
      }
      25% {
        background: #b9dff0;
      }
      37.5% {
        background: #d7e8f0;
      }
      50% {
        background: #03a9f4;
      }
      62.5% {
        background: #20b1f2;
      }
      75% {
        background: #47b9ed;
      }
      87.5% {
        background: #5fc0ec;
      }
      100% {
        background: #7acbef;
      }
    }
    @keyframes c3 {
      0% {
        background: #93d2ee;
      }
      12.5% {
        background: #b9dff0;
      }
      25% {
        background: #d7e8f0;
      }
      37.5% {
        background: #03a9f4;
      }
      50% {
        background: #20b1f2;
      }
      62.5% {
        background: #47b9ed;
      }
      75% {
        background: #5fc0ec;
      }
      87.5% {
        background: #7acbef;
      }
      100% {
        background: #93d2ee;
      }
    }
    @keyframes c2 {
      0% {
        background: #b9dff0;
      }
      12.5% {
        background: #d7e8f0;
      }
      25% {
        background: #03a9f4;
      }
      37.5% {
        background: #20b1f2;
      }
      50% {
        background: #47b9ed;
      }
      62.5% {
        background: #5fc0ec;
      }
      75% {
        background: #7acbef;
      }
      87.5% {
        background: #93d2ee;
      }
      100% {
        background: #b9dff0;
      }
    }
    @keyframes c1 {
      0% {
        background: #d7e8f0;
      }
      12.5% {
        background: #03a9f4;
      }
      25% {
        background: #20b1f2;
      }
      37.5% {
        background: #47b9ed;
      }
      50% {
        background: #5fc0ec;
      }
      62.5% {
        background: #7acbef;
      }
      75% {
        background: #93d2ee;
      }
      87.5% {
        background: #b9dff0;
      }
      100% {
        background: #d7e8f0;
      }
    }
  }
  .update {
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    box-sizing: border-box;
    .updateBox {
      // background: url("../../static/image/login/update_bg.png");
      background-size: 560rpx 660rpx;
      background-repeat: no-repeat;
      width: 560rpx;
      // min-height: 660rpx;
      padding: 22rpx;
      .update_header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 260rpx;
        .update_titleBox {
          color: #fff;
          padding-top: 15rpx;
          .update_title {
            font-size: 40rpx;
            font-weight: 600;
            padding-left: 32rpx;
          }
          .update_title2 {
            font-size: 32rpx;
            margin-top: 22rpx;
            padding-left: 74rpx;
          }
        }
        .update_close_icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .update_content {
        max-height: 290rpx;
        min-height: 240rpx;
        font-size: 32rpx;
        color: #666;
        line-height: 46rpx;
        padding: 10rpx 36rpx;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .update_foot {
        color: #03a9f4;
        font-size: 30rpx;
        // height: 50rpx;
        // line-height: 50rpx;
        text-align: center;
        margin-top: 30rpx;
        .downLoad {
          .downImg {
            width: 200rpx;
            height: 20rpx;
          }
          .bfb {
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .modal {
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    width: 510rpx;
    .content {
      color: #333;
      font-size: 30rpx;
      height: 130rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 9rpx;
      }
    }
    .operation {
      display: flex;
      .confirm {
        border-left: 1px solid #f6f7f8;
        color: #03a9f4;
      }
      .cancel,
      .confirm {
        width: 50%;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: 600;
        text-align: center;
        border-top: 1px solid #f6f7f8;
      }
    }
  }
}
</style>
